<template>
    <div class="shopcar">
        <div class="shopcar_main">
            <!-- 头部图表 -->
            <div class="shopcar_step">
                <div class="step1">我的购物车</div>
                <div class="step2">填写核对订单信息</div>
                <div class="step3">成功提交订单</div>
            </div>
            <!-- 中间购物车信息 -->
            <div class="shopcar_info">
                <div class="shopcar_bill">
                    <!-- 标题部分 -->
                    <div class="shopcar_title">
                        <div class="lump"></div>
                        我的购物车
                    </div>
                    <!-- 文本部分 -->
                     <div class="shopcar_text">
                    <!-- 地址栏核心部分 -->
                        <div class="address">
                            <table >
                                <tr>
                                    <th>商品名称</th>
                                    <th>规格</th>
                                    <th>数量</th>
                                    <th>单价（元）</th>
                                    <th>小计</th>
                                    <th>操作</th>
                                </tr>
                                <tr v-if="!itemList.length" n>
                                    <td colspan="6">购物车里面空空如也,快去购买吧!!</td>
                                </tr>
                                <tr v-else v-for="(item,index) of cake" :key="index">
                                    <td >
                                        <div class="cake_name">
                                            <!-- "http://localhost:3000/images/cake/sm/new1_sm.jpg" -->
                                             <a href="#"><img :src="item.image"></a>
                                             <a href="#">{{item.title}}</a>
                                        </div>
                                    </td>
                                    <td>
                                        {{item.spec}},{{item.peizi}},{{item.jiaxin}}
                                    </td>
                                    <td>
                                        <div class="btn_num">
                                            <button @click="reduceNum(item.lid)">-</button>
                                            <span id="cake_number">{{item.amount}}</span>
                                            <button @click="addNum(item.lid)">+</button>
                                        </div>
                                    </td>
                                    <td>
                                        {{item.price}}
                                    </td>
                                    <td>
                                        {{item.price*item.amount}}
                                    </td>
                                    <td>
                                        <a href="#" @click="removeItem(item.lid)">
                                            <i style="font-size:25px" class="el-icon-delete"></i>
                                        </a>
                                        
                                    </td>
                                </tr>
                                
                            </table>
                        </div>
                     </div>
                     
                </div>
                 
            </div>
            <!-- 尾部结算部分 -->
            <div class="shopcar_operate">
                 <div class="shopcar_text2">
                     <div> 购物金额小计 ￥{{getTotal}}</div>
                  </div>
                  <div class="btn_left">
                         <router-link to="/category">继续购物</router-link>
                     </div>
                  <div class="btn_right">
                       <a href="#">下单结算</a>
                  </div>
            </div>
       </div>
         <div class="bt"></div>
    </div>
</template>

<script>
 //将mapState引入到组件中,通过它接收vuex里面的数据
 import {mapMutations, mapState} from "vuex"
 //将store的函数映射到当前组件内

export default {
    data(){
        return{
            cake:[]
        }
    },
    methods:{
        ...mapMutations(['_addNum','_reduceNum','_removeItem']),
       addNum(lid){
         this._addNum(lid)
       },
       reduceNum(lid){
          this._reduceNum(lid)
       },
       removeItem(lid){
           var message=confirm('您确定要删除这个商品吗?')
           if(message==true){
               this._removeItem(lid)
           }

           
           
       }
    },
    computed:{
     //在计算属性中接收vuex里面的挂载数据
     ...mapState(['itemList']),
     getTotal(){
         let totalPrice=0
         this.cake.forEach((item)=>{
             totalPrice+=(item.price*item.amount)
         })
         return totalPrice
     }

    },
    mounted(){
        // console.log(this.$store.state.itemlist)
         this.cake=this.$store.state.itemList
         console.log(this.cake)
    }
}
</script>


<style scoped>

 .address .btn_num button{
    width: 20px;
    height: 20px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #757575;
 }


.shopcar .bt{
    clear: both;
    height: 50px;
}
     .shopcar{
         margin-top: 100px;
         width: 100%;
         height: auto;
         background-color: #fff;
     }
     .shopcar_main{
         width: 1170px;
         margin: 0 auto;
         padding: 10px 15px;

     }
     .shopcar_main .shopcar_step{
        
         height: 55px;
         margin: 30x auto 0 auto;
         display: flex;
         justify-content:center;
         font-size: 18px;
         line-height: 55px;
     }
      .shopcar_main .shopcar_info{
          width: 970px;
          height: auto;
          padding-top: 50px;
      }
      .shopcar_main .shopcar_info .shopcar_bill{
          width: 1170px;height: auto;
          padding-top: 20px;
      }
       .shopcar_main .shopcar_info .shopcar_bill .shopcar_title{
           width: 1170px;
           height: 20px;
           border-bottom: 1px solid #bcbcbc;
           font-size: 16px;
           line-height: 13px;
           color: #000;
       }
        .shopcar_main .shopcar_info .shopcar_bill .shopcar_title .lump{
            display: inline-block;
            width: 4px;
            height: 16px;
            margin: 0 2px 0 0;
            background-color: #e4004f;
        }
     .shopcar_main .shopcar_step div{
         margin-right: 90px;
     }
     .shopcar_main .shopcar_step .step1{
         width: 90px;
         padding: 0 0 0 120px;
         background: url(../assets/shopcar/01.png) no-repeat 0 -165px;

     }
       .shopcar_main .shopcar_step .step2{
         width: 160px;
         padding: 0 0 0 120px;
         background: url(../assets/shopcar/01.png) no-repeat 0 -55px;

     }
       .shopcar_main .shopcar_step .step3{
         width: 110px;
         padding: 0 0 0 120px;
         background: url(../assets/shopcar/01.png) no-repeat 0 -110px;

     }
     .shopcar .shopcar_text{
         width: 1170px;
         height: auto;
     }
 .shopcar .shopcar_text .address{
     width: 1100px;
     height: auto;
     margin: 10px auto;
}
.shopcar .shopcar_text .address .cake_name{
   text-align: center;
}
.shopcar .shopcar_text .address  table{
    table-layout: fixed;
    width: 1100px;
    color: #000;
  
   
}
.shopcar .shopcar_text .address  table a{
    color: #000;
}

.shopcar .shopcar_text .address  table tr{
    border-bottom: 1px dotted #bcbcbc;
    text-align: center;
   

}
.shopcar .shopcar_text .address  table td{
 
    overflow: hidden;
}
.shopcar .shopcar_text .address  table tr:nth-child(1) th{
    padding: 10px 0;
}
.shopcar .shopcar_text .address #cake_number{
    width: 50px;
    height: 25px;
    margin: 0 5px;
    border: 1px solid #757575;
    line-height: 25px;
    text-align: center;
}
.shopcar .shopcar_operate{
    width: 1100px;
    height: auto;
    padding: 10px 0;
}
.shopcar .shopcar_text{
    width: 1100px;
    height: auto;
    margin: 10px 0;
}
.shopcar .shopcar_text2 div{
    text-align: right;
    color: #000;
}
.shopcar .btn_left{
    float: left;
    margin-top: 30px;
    
}

.shopcar .btn_left a,.shopcar .btn_right a{
    display: block;
    width: 123px;
    height: 36px;
    background-color: #e4004f;
    color: #fff;
    font: 500 16px '微软雅黑';
    text-align: center;
    line-height: 36px;
    border-radius: 5px;
     }
.shopcar .btn_right {
    float: right;
    margin-top: 30px;
}
.shopcar .shopcar_text .address tr:nth-child(2) td{
    padding: 15px 0;
    text-align: center;
}
</style>